//--- 注：不好意思 已经一年多没有写过react了，如果有什么不当的地方，还请多多谅解 ·-·

import { useState, useEffect } from "react";
import axios from "axios";
import style from "./index.module.less";
import moment from "moment";
import CountDown from "../components/CountDown/index";

export default function Home() {
  interface DataType {
    title: string;
    status: string;
    time: number[];
    restTime?: number;
    money: number;
    description: string;
  }
  const [data, setData] = useState<DataType[]>([]);

  useEffect(() => {
    axios
      .get("https://systemjs.1688.com/krump/schema/1352.json")
      .then((res) => {
        setData(res.data.list);
      });
  }, []);

  return (
    <div className={style.home}>
      <div>1688进货红包</div>
      <div className={style.container}>
        {data.length > 0 &&
          data.map((item, index) => (
            <div className={style.item} key={item.title + index}>
              {/* money 部分 */}
              <div
                className={`${style.money} ${
                  (item.money + "").length >= 4 ? style.small : ""
                }`}
              >
                {item.money} <span>元</span>
              </div>
              {/* 中间内容部分 */}
              <div className={style.content}>
                <div className={style.title}>{item.title}</div>
                <div className={style.desc}>{item.description}</div>
                {item.restTime ? (
                  <div className={style.restTime}>
                    <div className={style.restText}>据结束</div>
                    <CountDown restTime={item.restTime} />
                  </div>
                ) : (
                  <div className={style.timer}>
                    有效期: {moment(item.time[0]).format("MM.DD h:ss")} -{" "}
                    {moment(item.time[0]).format("MM.DD h:ss")}
                  </div>
                )}
              </div>
              {/* status部分 */}
              <div className={style.right}>{item.status}</div>
            </div>
          ))}
      </div>
    </div>
  );
}
